<template>
  <div style="text-align: center;" v-title data-title="用户管理">
    <h1 class="gray">
      用 户 管 理
    </h1>
    <el-divider></el-divider>
    <!-- 左 -->
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="addUser = true">新增用户</el-button>
      </el-form-item>
      <!-- 中 -->
      <el-form-item>
        <el-input v-model="searchForm.username" clearable placeholder="请输入查询的用户名">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-form-item>
      <!-- 右 -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getUser">查 询</el-button>
      </el-form-item>
     <el-form-item>
        <el-popconfirm title="确定要批量删除吗？" @confirm="deleteUser(null)">
          <el-button type="danger" slot="reference" :disabled="delBtnStau">批量删除</el-button>
        </el-popconfirm>
      </el-form-item>

    </el-form>

    <!-- 新增用户对话框 -->
    <el-dialog title="新增用户" :visible.sync="addUser" width="40%" :before-close="handleClose">
      <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px">
        <el-form-item label="昵称" prop="nickname">
          <el-input placeholder="请输入昵称" v-model="addForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input placeholder="请输入用户名" v-model="addForm.username"></el-input>
          <el-alert
              title="初始密码为888888"
              :closable="false"
              type="info"
              style="line-height: 12px;"
          ></el-alert>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input placeholder="请输入手机号" v-model="addForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input placeholder="请输入邮箱号" v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitUser('addForm')">立即创建</el-button>
          <el-button @click="resetForm('addForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-table
        :data="userData"
        tooltip-effect="dark"
        border
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="uid" label="UID">
      </el-table-column>

      <el-table-column prop="nickname" label="昵称">
      </el-table-column>
      <el-table-column prop="username" label="用户名">
      </el-table-column>
      <el-table-column prop="phone" label="手机号">
      </el-table-column>
      <el-table-column prop="email" label="邮箱">
      </el-table-column>
	  
     <!-- 创建时间 -->
     <el-table-column label="创建时间">
       <template slot-scope="scope">
         <i class="el-icon-time"></i>
         <span style="margin-left: 10px">{{scope.row.createTime}}</span>
       </template>
     </el-table-column>
     
     <!-- 修改时间 -->
     <el-table-column label="修改时间">
       <template slot-scope="scope">
         <i class="el-icon-time"></i>
         <span style="margin-left: 10px">{{scope.row.updateTime}}</span>
       </template>
     </el-table-column>

      <el-table-column prop="control" width="305" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="editUser(scope.row.uid)">修 改</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button size="mini" type="warning" icon="el-icon-s-tools"
                     @click="repassHandle(scope.row.uid, scope.row.username)">重置密码
          </el-button>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm confirm-button-text='删除' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
                         @confirm="deleteUser(scope.row.uid)" title="确定要删除这条记录？">
            <el-button size="mini" type="danger" icon="el-icon-delete" slot="reference">删 除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination
        style="float: right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]"
        :current-page="current"
        :page-size="size"
        :total="total">
    </el-pagination>
    <br><br>

    <!-- 修改用户对话框 -->
    <el-dialog title="修改用户信息" :visible.sync="updateUser" width="40%">
      <el-form :model="updateForm" :rules="rules" ref="updateForm" label-width="100px">
        <el-form-item label="昵称" prop="nickname">
          <el-input placeholder="请输入昵称" v-model="updateForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input placeholder="请输入手机号" v-model="updateForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input placeholder="请输入邮箱号" v-model="updateForm.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitUpdate('updateForm')">修 改</el-button>
          <el-button @click="resetForm('updateForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>


</template>

<script>
export default {
  name: "sysuser",
  data() {
    return {
      //搜索
      searchForm: {},
	  
      //按钮禁用
      delBtnStau: true,
      //定义用于批量删除的数组
      multipleSelection: [],

      //分页
      total: 0,
      size: 10,
      current: 1,

      addUser: false,
      updateUser: false,

      //新增用户
      addForm: {},
      //更新用户
      updateForm: {},

      rules: {
        nickname: [{
          required: true,
          message: '昵称不能为空',
          trigger: 'blur'
        },
          {
            max: 20,
            message: '长度在20个字符',
            trigger: 'blur'
          }
        ],
        username: [{
          required: true,
          message: '用户名不能为空',
          trigger: 'blur'
        },
          {
            max: 20,
            message: '长度在 16个字符',
            trigger: 'blur'
          }
        ],
        phone: [{
          required: true,
          message: '手机号不能为空',
          trigger: 'blur'
        },
          {
            min: 11,
            message: '长度在 11个字符',
            trigger: 'blur'
          }
        ],
        email: [{
          required: true,
          message: '邮箱不能为空',
          trigger: 'blur'
        },
          {
            max: 20,
            message: '长度在20个字符',
            trigger: 'blur'
          }
        ],
      },

      //后端传来用户数据
      userData: []
    }
  },
  created() {
    //渲染前加载用户数据
    this.getUser()
  },
  methods: {

    //勾选判定
    handleSelectionChange(val) {
      //console.log("勾选")
      //console.log(val)
      this.multipleSelection = val;
      //根据数组的长度判定
      this.delBtnStau = val.length == 0
    },

    //Element组件定义关闭提示
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
			this.addForm = {}
          })
          .catch(_ => {
          });
    },


    //1、获取用户数据,查询用户数据
    getUser() {
      this.$axios.get("/sys/user/list", {
        params: {
          username: this.searchForm.username,
          current: this.current,
          size: this.size
        }
      }).then(res => {
        this.userData = res.data.data.records
        this.size = res.data.data.size
        this.current = res.data.data.current
        this.total = res.data.data.total
      })
    },
	
    //翻页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //赋值
      this.size = val
      //调用刷新
      this.getUser()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      //赋值
      this.current = val
      //调用刷新
      this.getUser()
    },

    //新增用户
    submitUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/sys/user/save', this.addForm).then(res => {
            //提示
            this.$message({
              showClose: true,
              message: '添加成功',
              type: 'success'
            });
            //关闭窗口
            this.addUser = false;
			//刷新
			 this.getUser();
			 //清空表单
            this.addForm = {}
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    //修改用户
    editUser(uid) {
      this.$axios.get('/sys/user/info/' + uid).then(res => {
        this.updateForm = res.data.data
        this.updateUser = true;
      })
    },
    submitUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/sys/user/update', this.updateForm).then(res => {
            //提示
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success',
            });
			//修改为成重新加载数据
			this.getUser()
            //关闭窗口
            this.updateUser = false;
            //清空
            this.updateForm = {}
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    //删除接口
    deleteUser(uid) {
      //批量删除将id存储到数组
       var ids = []
      // //判断id是否为空
       if (uid) {
        ids.push(uid)
      } else {
        //遍历id
        this.multipleSelection.forEach(row => {
          //存储uid
          ids.push(row.uid)
        })
      }
      this.$axios.post("/sys/user/delete" , ids).then(res => {
        //提示
        this.$message({
          showClose: true,
          message: '用户已被删除',
          type: 'warning',
        });
		//刷新
		this.getUser()
      })

    },

    //重置密码
    repassHandle(uid, username) {
      this.$confirm('将重置用户【' + username + '】的密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/sys/user/repass', uid).then(res => {
          this.$message({
            showClose: true,
            message: '重置成功',
            type: 'warning',
            onClose: () => {
				
            }
          })
		  //刷新
		  this.getUser()
		  
        })
      })
    },

    //信息重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.addUser = false;
      this.updateUser = false;
    },




  }
}
</script>

<style scoped="">

</style>
